<!DOCTYPE html>
<html>
<head>
    <title>WebSocket 测试</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; background: #1a1a1a; color: #fff; }
        #output { 
            background: #000; 
            color: #0f0; 
            padding: 15px; 
            height: 400px; 
            overflow-y: auto; 
            font-family: 'Courier New', monospace;
            white-space: pre-wrap;
            border: 1px solid #0f0;
        }
        button { 
            padding: 10px 20px; 
            margin: 10px 5px; 
            font-size: 16px; 
            background: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
        button:hover { background: #45a049; }
        input { 
            padding: 10px; 
            width: 300px; 
            font-size: 14px; 
        }
        .error { color: #f44; }
        .success { color: #4f4; }
        .info { color: #4af; }
    </style>
</head>
<body>
    <h1>🔌 WebSocket连接测试</h1>
    
    <div>
        <label>主机ID: </label>
        <input type="number" id="hostId" value="1" />
        <button onclick="connect()">连接</button>
        <button onclick="disconnect()">断开</button>
    </div>
    
    <h3>连接状态: <span id="status">未连接</span></h3>
    
    <div id="output"></div>
    
    <script>
        let ws = null;
        const output = document.getElementById('output');
        const status = document.getElementById('status');
        
        function log(message, className = '') {
            const time = new Date().toLocaleTimeString();
            const line = `[${time}] ${message}\n`;
            const span = document.createElement('span');
            span.textContent = line;
            if (className) span.className = className;
            output.appendChild(span);
            output.scrollTop = output.scrollHeight;
        }
        
        function connect() {
            const hostId = document.getElementById('hostId').value;
            const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
            const wsUrl = `${protocol}//${window.location.host}/ws/ssh/${hostId}/`;
            
            log(`正在连接到: ${wsUrl}`, 'info');
            status.textContent = '连接中...';
            status.style.color = '#ff0';
            
            try {
                ws = new WebSocket(wsUrl);
                
                ws.onopen = () => {
                    log('✓ WebSocket连接已打开', 'success');
                    status.textContent = '已连接';
                    status.style.color = '#0f0';
                };
                
                ws.onmessage = (event) => {
                    log(`收到消息: ${event.data}`, 'info');
                    try {
                        const data = JSON.parse(event.data);
                        log(`解析后: type=${data.type}, message=${data.message || data.data || 'N/A'}`, 'info');
                    } catch (e) {
                        log(`无法解析JSON: ${e.message}`, 'error');
                    }
                };
                
                ws.onerror = (error) => {
                    log(`✗ WebSocket错误: ${JSON.stringify(error)}`, 'error');
                    status.textContent = '错误';
                    status.style.color = '#f00';
                };
                
                ws.onclose = (event) => {
                    log(`连接已关闭 (code: ${event.code}, reason: ${event.reason || '无原因'})`, 'error');
                    status.textContent = '已断开';
                    status.style.color = '#f00';
                };
            } catch (e) {
                log(`✗ 创建WebSocket失败: ${e.message}`, 'error');
                status.textContent = '失败';
                status.style.color = '#f00';
            }
        }
        
        function disconnect() {
            if (ws) {
                ws.close();
                ws = null;
                log('手动断开连接', 'info');
            }
        }
        
        // 页面加载时的提示
        log('WebSocket测试工具已就绪', 'success');
        log('请输入主机ID并点击"连接"按钮', 'info');
    </script>
</body>
</html>
